<template>
    <div>
        <mt-swipe :auto="3000">
          <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
            <img :src="item.img">
          </mt-swipe-item>
        </mt-swipe>

        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/newslist">
                        <img src="../../images/menu1.png">
		                    <div class="mui-media-body">新闻资讯</div>
                  </router-link >
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/home/phtotlist">
                        <img src="../../images/menu2.png">
		                    <div class="mui-media-body">图片分享</div>
                  </router-link>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu3.png">
		                    <div class="mui-media-body">商品购买</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu4.png">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu5.png">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../images/menu6.png">
		                    <div class="mui-media-body">联系我们</div></a></li>
		    </ul>

    </div>
</template>


<<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      lunbotuList: [
        
      ] // 保存轮播图的数组
    };
  },

  created() {
    this.getLunbotu();
  },

  methods: {

    getLunbotu() {
      this.$http.get('http://mint-ui.github.io/docs/#/zh-cn2/swipe').then(result => {
          console.log('getLunbotu OKOKOKOKOKOK');
          //console.log(result);
          if (result.status === 200) {
            // 成功了
            this.lunbotuList = [
              {
                id: 1000,
                img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539689443953&di=cc130f369521f6f5d270826311669697&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4034970a304e251f569f36f6aa86c9177f3e5350.jpg',
                url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539689443953&di=cc130f369521f6f5d270826311669697&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4034970a304e251f569f36f6aa86c9177f3e5350.jpg'
              },
              {
                id: 1001,
                img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539689443953&di=5d6de6e4386738b7b9b5183e40f1dbd3&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc83d70cf3bc79f3dab11b040b7a1cd11738b29c9.jpg',
                url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539689443953&di=5d6de6e4386738b7b9b5183e40f1dbd3&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc83d70cf3bc79f3dab11b040b7a1cd11738b29c9.jpg'
              },
              {
                id: 1002,
                img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539691214527&di=b47fdb5e95a2a7f8d49de16bd68b0474&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Faa18972bd40735fa4bf353cf93510fb30f240840.jpg',
                url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539691214527&di=b47fdb5e95a2a7f8d49de16bd68b0474&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Faa18972bd40735fa4bf353cf93510fb30f240840.jpg'
              },
            ];
            //Toast("加载轮播图OK......");
          } else {
            // 失败的
            Toast("加载轮播图失败。。。");
          }
        }
      )
    },
  }


}
    
</script>

<style lang="scss" scoped>
.mint-swipe {
    height: 200px;

    .mint-swipe-item{

    &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: cyan;
    }

      img {
        width: 100%;
        height: 100%;
      }

    }
}
.mui-grid-view.mui-grid-9 {
  background-color: white;
  border: none;

}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: none;
    img {
      width: 60px;
      height: 60px;
    };
    .mui-media-body{
      font-size: 13px;
    }
}

</style>
